<!-- 目标统计 -->
<template>
  <div id="Targets">
    <div id="TargetsEcharts" :style="{height:height,width:width}" />
  </div>
</template>

<script>
export default {
  name: 'Targets',
  data() {
    return {
      height: '306px',
      width: '100%',
      chart: null
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.initChart() // 构建统计图
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 构建统计图
    initChart() {
      this.chart = this.$echarts.init(document.getElementById('TargetsEcharts'))
      const data1 = [52, 76, 85, 101, 98, 87]
      const data2 = [35, 44, 55, 57, 56, 61]
      const xAxisData = ['一月', '二月', '三月', '四月', '五月', '六月']
      this.chart.setOption({
        color: ['#5fdaac'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['收入', '净利润'],
          show: false
        },
        xAxis: {
          data: xAxisData
        },
        yAxis: {},
        series: [{
          name: '净利润',
          type: 'bar',
          stack: '目标', // 折叠显示
          data: data2,
          color: '#6d7ff9'
        }, {
          name: '收入',
          type: 'bar',
          stack: '目标', // 折叠显示
          data: data1,
          color: '#5fdaac'
        }]
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
